<template>
  <div class="today-videos-list">
    <p class="video-info video-title">{{videoItem.title}} </p>
    <p class="video-info video-time">{{videoItem.createTime}}</p>
    <p class="video-info video-desc" v-if="videoItem.description">{{videoItem.description}}</p>
    <p class="video-info video-player">
      <video :src="videoItem.playUrl" controls :poster="videoItem.poster"></video>
    </p>
  </div>
</template>
<script lang="ts">
  import {Component, Vue, Prop} from "vue-property-decorator";


  @Component({
    components: {
    }
  })
  export default class VideoItem extends Vue {
    @Prop({default: {}})
    private videoItem!: object;

  }
</script>
<style lang="scss">
  .today-videos-list {
    padding: 15px 16px 10px;
    border-bottom: 1px solid #aaa;

    &:last-child {
      border-bottom: 0;
    }

    .video-info {
      margin-bottom: 10px;
    }

    .video-title {
      font-size: 14px;
      font-weight: bold;
      color: #000;
    }

    .video-time {
      font-size: 12px;
      color: #999;
    }

    .video-desc {
      font-size: 12px;
      color: #333;
    }

    .video-player {
      video {
        width: 100%;
      }
    }
  }
</style>


